<template>
    <div>
        <van-dropdown-menu >
            <van-dropdown-item v-model="value3" disabled :options="option1" />
            <van-dropdown-item v-model="value1" title="价格" :options="option2" @change="onChange1" />
            <van-dropdown-item v-model="value2"  title="分类" :options="option3" @change="onChange2" />
        </van-dropdown-menu>
        <div class="goods topic" >
            <!-- <button @click="fun()">dianiji</button> -->
            <div class="goods-pic">
                <!-- {{searchgoods}} -->
                <div class="goods_pic" v-for="v in Goods_list" :key="v.id" @click="goods_list(v.id)" >
                    <img :src="v.list_pic_url" alt="" >
                    <span>{{v.name}}</span>
                    <span>￥ {{v.retail_price}} 元</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {goods_list} from "@/request/home.js"
export default {
    name: 'Wjm0714Searchgoodslist',

    data() {
        return {
            item:'',
            price:"",
            value1: 'desc',
            value2: 0 ,
            value3:'A',
            option1:[{text:"综合",value: 'A'}],
            option2: [
                { text: '价格由低到高', value: 'asc' },
                { text: '价格由高到低', value: 'desc' },
            ],
            option3: [
                { text: '全部', value: 0 },
                { text: '居家', value: 1 },
            ],
            Goods_list : [],
        };
    },
    props:['search_goo'],
    computed:{
        
    },
    methods: {
        goods_list(id){
             this.$router.push({
                path:'/details',
                query:{
                    id
                }
            })
        },
        fun(){
            // console.log(this.searchgoods);
        },
        // value改变触发
        // 价格排序
        onChange1(v){
            console.log(v);
            this.price = v;
            goods_list({
                params:{
                    keyword:this.item,
                    page:1,
                    size:10,
                    order:v,
                    categoryId:0,
                    sort:'price'
                }
            })
            .then(res=>{
                console.log(res.data.data.data);
                this.Goods_list = res.data.data.data;

            })
            .catch(err=>{
                console.log(err);
            })
        },
        // 分类排序
        onChange2(v){
            console.log(this.price);
            goods_list({
                params:{
                    keyword:this.item,
                    page:1,
                    size:10,
                    order:this.price,
                    categoryId:v,
                    sort:'id'
                }
            })
            .then(res=>{
                console.log(res.data.data.data);
                this.Goods_list = res.data.data.data;

            })
            .catch(err=>{
                console.log(err);
            })
        }
    },
    watch:{
        search_goo:{
            handler(newv,oldv){
                console.log(newv);
                this.item = newv;
                goods_list({
                    params:{
                        keyword:newv
                    }
                })
                .then(res=>{
                    console.log(res.data.data.data);
                    this.Goods_list = res.data.data.data;
                })
                .catch(err=>{
                    console.log(err);
                })
            },
            immediate:true,
        }
    },
    created(){
    //    console.log(this.$store.getters.Item_change);
        console.log(this.$store.getters.search_Goods);
    },
    mounted(){
        
    }
};
</script>

<style lang="less" scoped>
    // 商品
.goods {
    // height: 300/100rem;
   .goods-pic{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        font-size: 14px;
        font-family: 黑体;
        .goods_pic{
            width: 50%;
            // height: 1.7rem;
            // background-color: aqua;
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 90%;
                
            }
            span{
                display: block;
                width: 100%;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                &:first-of-type{
                    font-size: 14px;
                    color: #333;
                }
                &:nth-of-type(2){
                    color: #8b0000;
                    margin-top: .1rem;
                    margin-bottom: .3rem;
                }
            }
        }
   }
}
</style>